<template>
  <a-row :gutter="16">
    <a-col :xs="0"  :sm="6" >
      <div style="width: 100%;position: sticky;top: 80px;margin-bottom: 20px">
          <user-card v-if="!loading" :user-id="problemListDetails.userId" />
      </div>
    </a-col>
    <a-col :xs="24" :sm="18">
      <a-card
          style="width: 100%;min-height: calc(100vh - 80px)"
          :tab-list="tabList"
          :active-tab-key="noTitleKey"
          @tabChange="key => onTabChange(key, 'noTitleKey')"
      >
        <a-skeleton active  :loading="loading">
          <preview-vditor v-show="noTitleKey === 'describe'"  v-if="!loading"  :data="problemListDetails.description"/>
          <problem-list v-show="noTitleKey === 'problemList'"
                        v-if="!loading"
                        :data="problemListDetails.problemVOList" />
        </a-skeleton>
      </a-card>
    </a-col>
  </a-row>
  <div>

  </div>
</template>

<script lang="ts" setup>
import * as api from "@/api/problemList";
import PreviewVditor from "@/components/PreviewVditor/index.vue";
import UserCard from "@/components/UserCard/index.vue";
import ProblemList from "@/components/ProblemList/index.vue"
const loading = ref<boolean>(true)
onMounted(async () => {
  const route = useRoute();
  const res = await api.getProblemListDetails(route.params.id as string, route.query.pwd as string)
  problemListDetails.value = res.data;
  loading.value = false;
})

const tabList = [
  {
    key: 'describe',
    tab: '题单描述',
  },
  {
    key: 'problemList',
    tab: '题目列表',
  },
];

const problemListDetails = ref({});
const noTitleKey = ref('describe');

const onTabChange = (value: string, type: string) => {
  //console.log(value, type);
  if (type === 'key') {
    key.value = value;
  } else if (type === 'noTitleKey') {
    noTitleKey.value = value;
  }
};

//筛选表单
interface FormState {
  layout: 'horizontal' | 'vertical' | 'inline';
  searchKey: string,
  difficulty: string;
  problemType: string;
  tagIds:Array<Tag>,
}
const formState = reactive<FormState>({
  layout: 'horizontal',
  searchKey:'',
  difficulty: '',
  problemType: '',
  tagIds:[]
});
watch(formState, (newVal, oldVal) => {
  // console.log('obj updated:', newVal)
  // const fun = debounce(async () => {
  //   pagination.current = 1
  //   await getProblemList_(formState)
  // })
  // fun();
})
//题库
interface ProblemType {
  id: string | number,
  name:string
}
const problemTypeList = ref<ProblemType>()
const getProblemList_ = async (from: FormState) => {
  const data_ = {
    searchKey: from.searchKey,
    difficultyId: from.difficulty,
    problemTypeId: from.problemType,
    tagIds: from.tagIds.map(item => item.id),
  }
  const params = {
    pageNum:pagination.current,
    pageSize:pagination.pageSize
  }
  const res = await getProblemList(data_,params)
  data.value = res.data.rows;
  pagination.total = res.data.total;
}
//难度
const difficultyList = ref();
//标签
interface Tag {
  id:string,
  name:string,
  color?:string
}
const tagList = ref<Array<Tag>>();
const formItemLayout = computed(() => {
  const { layout } = formState;
  return layout === 'horizontal'
      ? {
        wrapperCol: { span: 22 },
      }
      : {};
});
const addTag = (item:Tag) =>{
  tagList.value = tagList.value.filter(e => e.id !=item.id);
  formState.tagIds.push(item);
}
const removeTag = (item : Tag) =>{
  //console.log(item.id)
  const res = formState.tagIds.filter(e => e.id !=item.id)
  formState.tagIds = res;
//  console.log(formState.tagIds)
  tagList.value.push(item)
}
//题目列表
const columns = [
  {
    title: '编号',
    dataIndex: 'problemId',
    key: 'problemId',
  },
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '难度',
    dataIndex: 'difficultyName',
    key: 'difficultyName',
    ellipsis: true,
  },
  {
    title: '标签',
    dataIndex: 'tagNames',
    key: 'tagNames',
    ellipsis: true,
  }
];
const data = ref();

const pagination = reactive({
  total: 200,
  current: 1,
  pageSize: 5,
});
//表格改变时触发
const handleTableChange = (p, filters, sorter) => {
  //console.log(p)
  pagination.current = p.current
  getProblemList_(formState)
}
</script>
<style scoped>

</style>
